<template>
  <!-- 图片渐变组件 -->
  <div class="Image-loader">
    <img 
      v-if="!everythingDone" 
      class="placeholder" 
      :src="placeholder">

    <img  
      @load="handleLoader" 
      :src="src" 
      :style="{opacity:orginPacaty,transition:`${duration}ms`}" 
      >
  </div>
</template>

<script>
export default {
  data() {
    return {
      orginLoader:false, // 原图是否加载完成
      everythingDone:false
    }
  },
  computed:{
    orginPacaty(){  // 用来控制style样式的opacity的显示
      return this.orginLoader ? 1:0;
    }
  },
  props: {
    src: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 2000,
    },
  },
  methods: {
    handleLoader(){
      this.orginLoader = true; // 改变图片的样式
      setTimeout(() => {
        this.everythingDone = true;
        this.$emit('load');
      },this.duration);
      
    }
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/mixin.less");
.Image-loader{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
 img{
   .self-fill();
  object-fit: cover;
 }
 .placeholder{
   filter: blur(2vw);
 } 
}
</style>